<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页三</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <link href="../lib/layui-v2.6.3/css/layui.css" media="all" rel="stylesheet">
    <link href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet">
    <link href="../css/public.css" media="all" rel="stylesheet">
    <script src="../../lib/layui-v2.6.3/layui.js"></script>
    <script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="../../js/template-web.js"></script>
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }

        .top-panel > .layui-card-body {
            height: 60px;
        }

        .top-panel-number {
            line-height: 60px;
            font-size: 30px;
        }

        .top-panel-tips {
            line-height: 30px;
            font-size: 12px
        }
    </style>
</head>
<body>

<div class="layuimini-main">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md3"  style="height: 250px;width: 602px">

            <div class="layui-card top-panel" style="height: 100%">
                <div class="layui-card-header">商品数据</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number" id="commtityDate">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md3" style="height: 250px;width: 602px">
            <div class="layui-card top-panel" style="height: 100%">
                <div class="layui-card-header">用户数据</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number" id="memberdiv">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md3" style="height: 250px;width: 603px">
            <div class="layui-card top-panel" style="height: 100%">
                <div class="layui-card-header">订单数据</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number" id="orderdiv">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md9">
            <input  type="text" class="layui-input" id="test1">
            <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md3" >
            <div id="echarts-pies" style="background-color:#ffffff;min-height:438px;padding: 10px"></div>
        </div>
    </div>
</div>
<!--</div>-->
<script charset="utf-8" src="../lib/layui-v2.6.3/layui.js"></script>
<script charset="utf-8" src="../js/lay-config.js?v=1.0.4"></script>
<script>
    layui.use(['layer', 'echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            echarts = layui.echarts;

        /**
         * 报表功能
         */
        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

        function echarOrderData(date) {
            var monthArray=[];
            var countsArray=[]
            var saleArray=[]
            $.get("/statistics/orderYearTic",{"date":date}, function (result) {
                if (result.code==0){
                    $.each(result.data, function (index, item) {
                        monthArray.push(item.month+"月");
                        countsArray.push(item.counts)
                        saleArray.push(item.sale)
                    });
                    var optionRecords = {
                        title: {
                            text: '订单量-销售额-季度报表图'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            data: ['订单量', '销售额']
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data:monthArray
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '订单量',
                                type: 'line',
                                stack: '总量',
                                areaStyle: {},
                                data:countsArray
                            },
                            {
                                name: '销售额',
                                type: 'line',
                                areaStyle: {},
                                data:saleArray
                            },
                        ]
                    };
                    echartsRecords.setOption(optionRecords);
                }
            })
        }
        echarOrderData(2022)
        layui.use('laydate', function () {
            var laydate=layui.laydate
            //年选择器
            laydate.render({
                elem: '#test1'
                ,type: 'year'
                ,value: '2022'
                ,done: function(value){
                    echarOrderData(value);
                }
            });
        });
        // /**
        //  * 类别数据-玫瑰图表
        //  */
        var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');
        $.get("/statistics/kindCommtityStatistics",function (ex) {
            var kindNameArray=[];
            var dataArray=[];
            $.each(ex.data, function (index, item) {
                kindNameArray.push(item.name);
                var kindData={
                    value : item.counts,
                    name : item.name
                }
                dataArray.push(kindData);
            });
            var optionPies = {
                title: {
                    text: '类别-商品数据图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data:kindNameArray
                },
                series: [
                    {
                        name: '数据库来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        roseType: 'radius',
                        data:dataArray ,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            echartsPies.setOption(optionPies);
        })
        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsRecords.resize();
        }

    });
</script>
<script id="CommtityDateTemplate" type="text/template">
   <div style="position: relative;left: 20px">
    <div style="display: inline-block;font-size: 10px;margin-left: 80px">
        <div style="font-size: 18px;color: #b44e4e">{{dateValue.value}} 款</div>
        <div style="font-size: 15px;color: #103c5a;border-top: 1px solid #d8dbe2">{{dateValue.name}}</div>

    </div>
    <div style="display: inline-block;font-size: 10px;margin-left: 55px">
        <div style="font-size: 18px;color: #b44e4e">{{dateValue.onValue}} 款</div>
        <div style="font-size: 15px;color: #103c5a;border-top: 1px solid #d8dbe2">{{dateValue.onName}}</div>
    </div>
    <div style="display: inline-block;font-size: 10px;margin-left: 40px">
        <div style="font-size: 18px;color: #b44e4e">{{dateValue.inValue}} 款</div>
        <div style="font-size: 15px;color: #103c5a;border-top: 1px solid #d8dbe2">{{dateValue.inName}}</div>
    </div>
   </div>
</script>
<script id="MemberTemplate" type="text/template">
    <div style="position: relative;left: 75px">
        <div style="display: inline-block;font-size: 10px;margin-left: 10px">
            <div style="font-size: 15px;color: #103c5a">{{dateValue.name}}</div>
            <div style="font-size: 18px;color: #b44e4e;border-top: 1px solid #d8dbe2">{{dateValue.value}} 人</div>
        </div>
        <div style="display: inline-block;font-size: 10px;margin-left: 40px">
            <div style="font-size: 15px;color: #103c5a">{{dateValue.inName}} </div>
            <div style="font-size: 18px;color: #b44e4e;border-top: 1px solid #d8dbe2">{{dateValue.inValue}} 人</div>
        </div>
        <div style="display: inline-block;font-size: 10px;margin-left: 55px">
            <div style="font-size: 15px;color: #103c5a">{{dateValue.onName}}</div>
            <div style="font-size: 18px;color: #b44e4e;border-top: 1px solid #d8dbe2">{{dateValue.onValue}} 人</div>

        </div>
    </div>
</script>
<script id="OrderTemplate" type="text/template">
    <div style="position: relative;left: 75px">
        <div style="display: inline-block;font-size: 10px;margin-left: 10px">
            <div style="font-size: 18px;color: #b44e4e">{{dateValue.value}} 单</div>
            <div style="font-size: 15px;color: #103c5a;border-top: 1px solid #d8dbe2">{{dateValue.name}}</div>
        </div>
        <div style="display: inline-block;font-size: 10px;margin-left: 40px">
            <div style="font-size: 18px;color: #b44e4e">{{dateValue.inAmount}} 元</div>
            <div style="font-size: 15px;color: #103c5a;border-top: 1px solid #d8dbe2">{{dateValue.inName}}</div>
        </div>
        <div style="display: inline-block;font-size: 10px;margin-left: 55px">
            <div style="font-size: 18px;color: #b44e4e">{{dateValue.onAmount}} 元</div>
            <div style="font-size: 15px;color: #103c5a;border-top: 1px solid #d8dbe2">{{dateValue.onName}}</div>
        </div>
    </div>
</script>
<script>
    $.get("/statistics/commtityTic", function (result) {
        if (result.code==0){
            date = {dateValue: result.data}
            mera = template("CommtityDateTemplate", date);
            $("#commtityDate").append(mera);
        }
    })
    $.get("/statistics/MemberTic", function (result) {
        if (result.code==0){
            date = {dateValue: result.data}
            mera = template("MemberTemplate", date);
            $("#memberdiv").append(mera);
        }
    })
    $.get("/statistics/orderTic", function (result) {
        if (result.code==0){
            date = {dateValue: result.data}
            mera = template("OrderTemplate", date);
            $("#orderdiv").append(mera);
        }
    })
</script>
</body>
</html>
